<template>
  <el-table
    @row-contextmenu="rightClick"
    @row-dblclick="openFileFn"
    :data="fileList"
    style="width: 100%"
    height="100%"
  >
    <el-table-column label="文件名">
      <template slot-scope="scope">
        <div class="line">
          <i class="icon" :class="fileType[scope.row.typeId].typeSuffix"></i>
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="文件大小" width="300">
      <template slot-scope="scope">
        <span style="margin-left: 10px" v-show="scope.row.size">
          {{ (scope.row.size / Math.pow(1024, 2)).toFixed(2) }} M
        </span>
      </template>
    </el-table-column>
    <el-table-column label="创建时间">
      <template slot-scope="scope">
        <span style="margin-left: 10px">
          {{ scope.row.createTime }}
        </span>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  name: "ListFileIcon",
  props: {
    fileList: { type: Array, default: null },
    fileType: { default: { typeSuffix: null } },
    openFileFn: { type: Function },
    deleteFileFn: { type: Function },
    createDirFn: { type: Function },
    refreshFn: { type: Function },
    renameFileFn: { type: Function },
    moveFileFn: { type: Function },
    downloadFn: { type: Function },
    shareFn: { type: Function }
  },
  methods: {
    rightClick(row, column, event) {
      const p = this;
      this.$contextmenu({
        items: [
          this.fileType[row.typeId].typeSuffix !== "misc"
            ? {
                label: "打开",
                onClick: () => {
                  p.openFileFn(row);
                }
              }
            : {},
          {
            label: "下载",
            divided: true,
            onClick: () => p.downloadFn(row.id, row.name)
          },
          this.fileType[row.typeId].typeSuffix !== "dir"
            ? {
                label: "分享",
                onClick: () => p.shareFn(row.id)
              }
            : {},
          {
            label: "移动到",
            onClick: () => p.moveFileFn(row.id)
          },
          {
            label: "复制到",
            onClick: () => p.$bus.$emit("copyFile", row.id)
          },
          {
            label: "重命名",
            divided: true,
            onClick: () => p.renameFileFn(row.id, row.name)
          },
          {
            label: "删除",
            onClick: () => {
              p.deleteFileFn(row.id);
            }
          }
        ],
        event,
        zIndex: 3,
        minWidth: 140
      });
    }
  }
};
</script>

<style lang="less" scoped>
.icon {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: no-repeat 100% 100%;
  background-size: cover;
}
.dir {
  background-image: url("../../static/icons/folder.png");
}
.zip {
  background-image: url("../../static/icons/zip.png");
}
.misc {
  background-image: url("../../static/icons/misc.png");
}
.mp3 {
  background-image: url("../../static/icons/music.png");
}
.jpg {
  background-image: url("../../static/icons/jpg.png");
}
.mp4 {
  background-image: url("../../static/icons/video.png");
}
.txt {
  background-image: url("../../static/icons/txt.svg");
}
.line {
  display: flex;
  flex-direction: row;
  align-items: center;
}
</style>
